<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>CDN</h1>

    <!-- 提供一个挂载点元素 -->
    <div id="root"></div>

    <!-- 引入核心类库 -->
    <!--      react.js      核心                  React -->
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <!--      react-dom.js  专门处理DOM相关的库    ReactDOM -->
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <!--      babel.js 用于转换 JSX 语法为 JS -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
      // 要渲染一个元素（比如一个 button）到 挂载点，而不是字符串，应该如何操作
      //      1. 需要使用 JSX 扩展语法
      //          1. 引入 babel.js  来转换 JSX 语法
      //          2. 在有 JSX 语法的 script 标签，声明 type 属性值为 "text/babel"
      //          WARNING: You are using the in-browser Babel transformer. Be sure to precompile your scripts for production
      //          目前这段代码是在浏览器端运行时做的 JSX 转换成 JS 工作，真正做项目时需要提供做解析工作。使用脚手架即可。
      //      2. 使用 React.createElemenet() API
      //          类似于 Vue 中的 render 函数
      //          {
      //              // Vue2
      //              render(h) {
      //                  return h('div', null, '啊啊啊')
      //              }
      //              // Vue3
      //              import { h } from 'vue'
      //              render() {
      //                  return h('div', null, '啊啊啊')
      //              }
      //          }
      //          语法：React.createElemenet(元素, props, children)

      const root = ReactDOM.createRoot(document.querySelector("#root"));

      //    下面的代码，需要 babel 来转换。  PS: JSX 转换，其实就是转换成  React.createElement() 调用形式
      const vDOM1 = <button>按钮</button>;
      console.log("vDOM1", vDOM1);
      //    下面的代码，无需 babel 来转换
      const vDOM = React.createElement("button", null, "按钮");

      console.log(vDOM); // JavaScript 对象，称之为 虚拟节点、虚拟DOM、React元素

      root.render(vDOM);
    </script>

    <!-- <script>
      // 创建一个 React元素 （React虚拟节点、React虚拟DOM）
      const box = "Hello React";

      // 使用 ReactDOM.render(要渲染的内容，挂载点元素) 来渲染挂载点
      //      PS: 挂载点元素，不支持传递 css 选择器的方式，必须明确一个 DOM 对象
      // ReactDOM.render(box, document.querySelector("#root"));

      /**
       * WARNING:
       *    ReactDOM.render is no longer supported in React 18. Use createRoot instead.
       *    上面的 ReactDOM.render 方法不是一个长期支持的方法。后续可能会被移除掉，推荐在 18 版本中使用 createRoot 来代替
       */

      //  通过 ReactDOM.createRoot(挂载点元素) 来创建挂载点容器对象
      const root = ReactDOM.createRoot(document.querySelector("#root"));
      //  使用 容器对象 root 的 render 方法 来渲染内容
      root.render(box);
    </script> -->
  </body>
</html>
